{% extends '::base.html.twig' %}

{% block resources_attributes %} class="active"{% endblock %}

{% block title %}{% trans %}Educino Questions{% endtrans %}{% endblock %}

{% block body %}
<div class="row-fluid whiteWrapper">

    <form class="form-horizontal formHead" action="{{ path('list_questions') }}">
        <fieldset>
            <legend>{% trans %}Ask An Expert{% endtrans %}</legend>
            <hr class="smallHr">
            <p class="clear">{% trans %}Ask us about any issue you may be wondering about and we'll do our best to find the answer.{% endtrans %}</p>

            <div class="sendMessageBlock">

                <form class="form-horizontal">
                    <fieldset>


                        <div class="alert alert-info addQuestionResult" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {% trans %}Your question has successfully sent to Educino administrator and will be answered and posted in this page as soon as possible{% endtrans %} 
                        </div>


                        <div class="control-group">
                            <label class="control-label">{% trans %}Your Question{% endtrans %}*</label>
                            <div class="controls">      
                                <input type="text" class="input-xxlarge" id="addQuestionText" placeholder="{% trans %}250 characters max{% endtrans %}"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">{% trans %}More Details{% endtrans %}</label>
                            <div class="controls">      
                                <textarea cols="3" class="input-xxlarge" id="addQuestionDetails"></textarea>
                                <span class=" help-block">{% trans %}Please make sure all questions follow our{% endtrans %} <a href="#Guidelines" role="button" data-toggle="modal" >{% trans %}Community Guidelines{% endtrans %}</a></span>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="controls">      
                                <label class="checkbox">
                                    <input type="checkbox" id="answerNotify" {% if is_granted('ROLE_USER') and app.user.answerNotify == 1%}checked=""{% endif %}> {% trans %}Notify me when I get an answer{% endtrans %}
                                </label>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">  
                        {% if is_granted('ROLE_USER') %}
                                    <button class="btn blue submit" id="addQuestion" type="button" href="javascript:void(0)">{% trans %}Ask{% endtrans %}</button>
                                    <img src="{{ asset('img/ajax-loader.gif') }}" id="questionLoader" style="float: right;margin-right: 175px;display: none;"/>
                        {% else %}
                                    <a class="btn blue submit" id="addQuestion" href="#signUpAndLogin" role="button" data-toggle="modal">{% trans %}Ask{% endtrans %}</a>
                        {% endif %}
                                </div>
                            </div>



                        </fieldset>
                    </form>
                </div>

                <div class="control-group right searchTop">
                    <label class="control-label" >&nbsp;</label>
                    <div class="controls">

                        <div class="input-append">
                            <input class="input-large" placeholder="{% trans %}Question{% endtrans %}" name="question" type="text"/>
                            <button class="btn blue" type="submit">{% trans %}Search Question{% endtrans %}</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>

        <div id="questionsList">
        {% for question in questions %}
                <div class="question">
                    <a href="{{ path('show_question',{'id' : question.id}) }}">{{ question }}</a>
                </div>
        {% else %}
                <div class="alert alert-info">
                    No Questions Found.
                </div>
        {% endfor %}
            </div>        


    {% if lastPageNumber > 1 %}
            <div class="pagination right">
        {% set paginationParameters = app.request.attributes.get('_route_params') | merge(app.request.query.all()) %}
                    <ul>
            {% if page > 1 %}
                            <li><a href="{{ path(app.request.attributes.get('_route'), paginationParameters | merge({'page': page-1 })) }}">&laquo;</a></li>
            {% endif %}
        {% for numberOfPage in 1..lastPageNumber %}
            {% if numberOfPage > page - 3 and numberOfPage < page + 3 %}
                            <li class="{% if page == numberOfPage %}disabled{% endif %}"><a href="{{ path(app.request.attributes.get('_route'), paginationParameters | merge({'page': numberOfPage})) }}">{{ numberOfPage }}</a></li>
            {% endif %}
        {% endfor %}
        {% if page < lastPageNumber %}
                            <li><a href="{{ path(app.request.attributes.get('_route'), paginationParameters | merge({'page': page+1})) }}">&raquo;</a></li>
        {% endif %}
                        </ul>
                    </div>
    {% endif %}







                </div>

<div class="modalContainer">
    <div id="Guidelines" class="modal hide fade wetAsphalt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-header">
            <h3 id="myModalLabel">{% trans %}Community Guidelines{% endtrans %}</h3>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>

        <div class="modal-body">
            <div class="guidelines">
                <p>
                    {% trans %}Hi! Welcome to the Educino community! In order to post on this site, please follow the guidelines below. We appreciate your contribution to making this resource useful and informative{% endtrans %}
                </p>

                <ul>
                    <li>{% trans %}Use of abusive or hateful language will not be permitted; community members are advised to be polite in expressing their views.{% endtrans %}</li>
                    <li>{% trans %}Comments should not be used for promotion of an individual or any company.{% endtrans %}</li>
                    <li>{% trans %}Avoid posting your contact information like mobile number and email or any other personal information.{% endtrans %}</li>
                    <li>{% trans %}Avoid posting repeated questions. Try to use the search to see if the Question that you intend to ask has already been posted.{% endtrans %}</li>
                    <li>{% trans %}Any content that violates copyright, National and State Laws should not be posted. If you are quoting someone else's material or article give credit to the original author.{% endtrans %}</li>
                </ul>

                <p>
                    {% trans %}We have the right to alter, edit, remove, suspend or refuse any content without notice, if we consider that the content is objectionable or violates these terms or for any other reason.{% endtrans %}
                </p>
            </div>
        </div>
        <div class="modal-footer">

        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{parent()}}
                <script>
                  $(document).ready(function(){
                      //add question
                      $('#addQuestion').click(function(){
                          var question = $('#addQuestionText').val();
                          if(($.trim(question)).length > 2){
                              var questionDetails = $('#addQuestionDetails').val();
                              
                              //show loader
                              $('#questionLoader').show();
                              $('#addQuestion').hide();
              
                              if($('#answerNotify').is(':checked')){
                                  var notifyFlag = 1;
                              }else{
                                  var notifyFlag = 0;
                              }
                              
                              var url = "{{ path('add_question') }}/"+encodeURIComponent($.trim(question))+"/"+notifyFlag;
              
                              if(($.trim(questionDetails)).length > 0)
                                url = url+"/"+encodeURIComponent($.trim(questionDetails));
              
              
                              $.ajax({
                                url: url,
                                success: function(msg){
                                    if(msg == 'login'){
                                    }else if(msg != 'failed'){
                                        $('.addQuestionResult').show();
                                    }
                                },
                                complete: function(){
                                    $('#questionLoader').hide();
                                    $('#addQuestion').show();
                                    $('#addQuestionText').val("");
                                    $('#addQuestionDetails').val("");
                                }
                              });
                          }
                      });
      
                      {% if is_granted('ROLE_USER') and app.session.get('sessionQuestion') %}
                        $('html, body').animate({
                            scrollTop: $("#addQuestionText").offset().top - 200
                        }, 2000);
        
                          //show loader
                          $('#questionLoader').show();
                          $('#addQuestion').hide();

                          if($('#answerNotify').is(':checked')){
                              var notifyFlag = 1;
                          }else{
                              var notifyFlag = 0;
                          }
                              
                          var url = "{{ path('add_question') }}/"+encodeURIComponent($.trim("{{ app.session.get('sessionQuestion') }}"))+"/"+notifyFlag;

                          if(($.trim("{{ app.session.get('sessionQuestionDetails') }}")).length > 0)
                                url = url+"/"+encodeURIComponent($.trim("{{ app.session.get('sessionQuestionDetails') }}"));

                          $.ajax({
                            url: url,
                            success: function(msg){
                                if(msg == 'login'){
                                }else if(msg != 'failed'){
                                    $('.addQuestionResult').show();
                                }
                            },
                            complete: function(){
                                $('#questionLoader').hide();
                                $('#addQuestion').show();
                                $('#addQuestionText').val("");
                                $('#addQuestionDetails').val("");
                            }
                          });
                      {% endif %}
                  });
                    </script>
{% endblock %}